<template>
  <div class="dialog"  v-if="show">
    <el-dialog
      title="设备详情"
      :visible.sync="showDialog"
      width="55%"
      top="0"
      :destroy-on-close = "true"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基础信息" name="first" />
        <el-tab-pane label="购置信息" name="second" />
        <el-tab-pane label="报废信息" name="third" />
        <el-tab-pane
          label="点位信息"
          name="point"
        />
        <el-tab-pane label="其他信息" name="fourth" />
      </el-tabs>
      <el-form
        v-if="activeName==='first'"
        ref="ruleForm"
        label-position="left"
        :model="formData"
        :rules="rules"
        disabled
        class="el-form"
      >
        <el-form-item label="设备名称：" prop="equipmentName" class="w50p">
          <el-input
            v-model="formData.equipmentName"
            placeholder="请输入设备名称"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="所属设备型号：" prop="equModelCode" class="w50p">
          <el-select
            v-model="formData.equModelCode"
            filterable
            clearable
            :disabled="!editStatus"
          >
            <el-option
              v-for="(item,index) in equModelArr"
              :key="index+'equModelCode'"
              :label="item.modelName"
              :value="item.equModelCode"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="是否展示工况数据：" prop="operationMode" class="w50p">
          <el-select
            v-model="formData.operationMode"
            filterable
            clearable
            :disabled="!editStatus"
          >
            <el-option
              v-for="item in yesOrNoList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="是否可自动驾驶：" prop="selfDriving" class="w50p">
          <el-select
            v-model="formData.selfDriving"
            filterable
            clearable
            :disabled="!editStatus"
          >
            <el-option
              v-for="item in yesOrNoList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="生产日期：" prop="produceDate" class="w50p">
          <el-date-picker
            v-model="formData.produceDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="农机码：" class="w50p">
          <el-input v-model="formData.imei" placeholder="请输入农机码" />
        </el-form-item>
        <el-form-item label="出厂序号：" prop="serialNumber" class="w50p">
          <el-input v-model="formData.serialNumber" placeholder="请输入出厂序号" />
        </el-form-item>
        <el-form-item label="品牌：" prop="brand" class="w50p">
          <el-input v-model="formData.brand" placeholder="请输入品牌" />
        </el-form-item>
        <el-form-item label="生产企业：" prop="manufacturer" class="w50p">
          <el-input v-model="formData.manufacturer" placeholder="请输入生产企业" />
        </el-form-item>

        <el-form-item
          v-if="!editStatus"
          label="设备图片："
          prop="picture"
          class="w100p"
        >
          <!-- <el-image :src="pictureData" :preview-src-list="pictureList" /> -->
        </el-form-item>

        <el-form-item v-else label="设备图片：" prop="picture" class="w100p">
          <!-- <el-upload
            action
            :http-request="modeUpload"
            :file-list="uploadPictureList"
            accept=".png, .jpg, .jpeg"
            :on-remove="handleRemove"
          >
            <el-button type="text" class="add-many">
              <i class="el-icon-plus"></i>
            </el-button>
          </el-upload>-->
          <!-- 图片上传组件辅助 -->
          <!-- <el-upload
            class="img-uploader"
            :accept="acept"
            action="/xxx"
            :http-request="imgRequest"
          />-->

          <UploadPics
          v-if="uploadPictureList.length > 0"
            :disabled="true"
            ref="UploadPics"
            accept=".jpg, .jpeg, .png"
            v-model="uploadPictureList"
            @input="handlerAddFileList($event, 'png')"
            @delectFileId="handlerDeleteId($event, 'png')"
          ></UploadPics>
        </el-form-item>
        <el-form-item
          v-if="!editStatus"
          label="设备视频："
          prop="video"
          class="w100p"
        >
          <div style="width:100%">
            <video :src="videoUrl" class="video-con" controls></video>
            <!-- <p class="hang-font">暂无内容</p> -->
          </div>
        </el-form-item>
        <el-form-item v-else label="设备视频：" prop="video" class="w100p">
          <!--视频上传组件辅助 -->
          <!-- <el-upload action="" ref="uploadFileVideo" :auto-upload="false"
        :on-change="(file) => { handleUploadSuccess(file, 'video') }" accept=".mp4, .avi, .mpg, .rmvb"
          name="file" :show-file-list="false" />-->

          <!-- <el-upload
            class="video-uploader"
            :accept="acct"
            action="/xxx"
            :http-request="videoRequest"
          />-->
          <UploadPics
          v-if="videoUrlList.length > 0"
            :disabled="true"
            ref="UploadPics"
            accept=".mp4"
            v-model="videoUrlList"
            @input="handlerAddFileList($event, 'video')"
            @delectFileId="handlerDeleteId($event, 'video')"
          ></UploadPics>
          <!-- <el-upload
            action
            :http-request="modeUpload"
            :file-list="videoUrlList"
            accept=".mp4"
            :on-remove="handleRemoveV"
          >
            <el-button type="text" class="add-many">
              <i class="el-icon-plus"></i>
            </el-button>
          </el-upload>-->
        </el-form-item>
      </el-form>
      <el-form
        v-if="activeName==='point'"
        ref="ruleForm"
        label-position="left"
        :model="formData"
        disabled
        :rules="rules"
        class="el-form"
      >
        <el-form-item label="经度：" prop="longitude" class="w50p">
          <el-input v-model="formData.longitude" @input="(e) => { if (this.formData.latitude&&e) {this.lnglat =  [e, this.formData.latitude]} }"  placeholder="请输入经度或者从下方地图选择" />
        </el-form-item>
        <el-form-item label="纬度：" prop="latitude" class="w50p">
          <el-input v-model="formData.latitude"  @input="(e) => {if (this.formData.longitude&&e) { this.lnglat =  [this.formData.longitude, e]} }" placeholder="请输入纬度或者从下方地图选择" />
        </el-form-item>
        <div class="w100p" style="height: 49.5vh;">
          <MapArea :isClick="false" :lnglat="lnglat" />
        </div>
      </el-form>
      <el-form
        v-if="activeName==='second'"
        ref="ruleForm"
        label-position="left"
        :model="formData1"
        :rules="rules"
        disabled
        class="el-form"
      >
        <el-form-item label="设备名称：" prop="equipmentCode" class="w50p">
          <!-- <el-select v-model="formData1.equipmentCode" filterable clearable placeholder="请选择设备名称">
              <el-option
                v-for="(item,index) in equipmentArr"
                :key="index+'.equipmentCode'"
                :label="item.equipmentName"
                :value="item.equipmentCode"
              />
          </el-select>-->
          <el-input
            v-model="formData1.equipmentName"
            placeholder="请输入设备名称"
            :disabled="true"
          />
        </el-form-item>

        <el-form-item label="购置日期：" prop="purchaseDate" class="w50p">
          <el-date-picker
            v-model="formData1.purchaseDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择购置日期" />
        </el-form-item>

        <el-form-item label="质保期：" prop="sellByDate" class="w50p">
          <el-input v-model.number="formData1.sellByDate" placeholder="请输入质保期">
            <template slot="append">月</template>
          </el-input>
        </el-form-item>
        <el-form-item label="质保日期：" prop="warrantyDate" class="w50p">
          <el-date-picker
            v-model="formData1.warrantyDate"
            type="date"
            value-format="yyyy-MM-dd"
            disabled
            placeholder="请选择生产日期和输入质保期"
          />
        </el-form-item>
        <el-form-item label="供应商：" prop="taxpayerNumber" class="w50p">
          <el-input v-model="formData1.taxpayerNumber" placeholder="请输入供应商" />
        </el-form-item>
        <el-form-item label="补贴金额：" prop="purchaseSubsidy" class="w50p">
          <el-input v-model="formData1.purchaseSubsidy" placeholder="请输入补贴金额" />
        </el-form-item>
        <el-form-item label="购置金额：" prop="purchaseAmount" class="w50p">
          <el-input v-model="formData1.purchaseAmount" placeholder="请输入购置金额" />
        </el-form-item>

        <el-form-item label="购置备注：" prop="purchaseRemark" class="w50p">
          <el-input v-model="formData1.purchaseRemark" placeholder="请输入购置备注" />
        </el-form-item>
        <!-- <el-form-item label="设备质保日期 ：" class="w50p" prop="warrantyDate">
          <el-date-picker
            v-model="formData1.warrantyDate"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            clearable
            :disabled="!editStatus"
          />
        </el-form-item>-->
        <!-- <el-form-item label="购置数量：" prop="num" class="w50p">
          <el-input
            v-model="formData1.num"
            placeholder="请输入购置数量"
            :disabled="!editStatus"
          />
          <el-select
            v-model="formData1.unitNo"
            filterable
            clearable
            placeholder="单位选择"
            :disabled="!editStatus"
          >
            <el-option
              v-for="(item,index) in unitArr"
              :key="index+'unit'"
              :label="item.unitName"
              :value="item.unitNo"
            />
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="购置总金额：" prop="total" class="w50p">
          <el-input
            v-model="formData1.total"
            placeholder="请输入购置总金额"
            :disabled="!editStatus"
          />元
        </el-form-item>
        <el-form-item label="购置日期：" class="w50p" prop="purchaseDate">
          <el-date-picker
            v-model="formData1.purchaseDate"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            clearable
            :disabled="!editStatus"
          />
        </el-form-item>
        <el-form-item label="供应商：" prop="taxpayerNumber" class="w50p">
          <el-input
            v-model="formData1.taxpayerNumber"
            placeholder="请输入供应商"
            :disabled="!editStatus"
          />
        </el-form-item>
        <el-form-item label="购置补贴金额：" prop="subsidy" class="w50p">
          <el-input
            v-model="formData1.subsidy"
            placeholder="请输入购置补贴金额"
            :disabled="!editStatus"
          />元
        </el-form-item>
        <el-form-item label="备注：" prop="remark" class="w50p">
          <el-input
            v-model="formData1.remark"
            type="textarea"
            placeholder="请输入备注(选填)"
            :autosize="{ minRows: 2, maxRows: 4 }"
            clearable
            :disabled="!editStatus"
          />
        </el-form-item> -->
      </el-form>
      <el-form
        v-if="activeName==='third'"
        ref="ruleForm"
        label-position="left"
        :model="formData2"
        disabled
        :rules="rules"
        class="el-form"
      >
        <el-form-item label="设备名称：" prop="equipmentCode" class="w50p">
          <!-- <el-select v-model="formData2.equipmentCode" filterable clearable placeholder="请选择设备名称" :disabled="nowChanceStau==='edit'?true:false">
              <el-option
                v-for="item in equipmentArr"
                :key="item.equipmentCode"
                :label="item.equipmentName"
                :value="item.equipmentCode"
              />
          </el-select> -->
          <el-input
            v-model="formData2.equipmentName"
            placeholder="请输入设备名称"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="报废日期：" class="w50p" prop="scrapDate">
          <el-date-picker
            v-model="formData2.scrapDate"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            clearable
            :disabled="!editStatus"
          />
        </el-form-item>
        <el-form-item label="已使用(天)：" prop="used" class="w50p" :required="true">
          <el-input
            v-model="formData2.used"
            placeholder="请输入已使用天数"
            :disabled="!editStatus"
          />
        </el-form-item>
        <el-form-item label="报废补贴金额：" prop="subsidy" class="w50p" :required="true">
          <el-input
            v-model="formData2.subsidy"
            placeholder="请输入报废补贴金额"
            :disabled="!editStatus"
          />
        </el-form-item>
        <el-form-item label="备注：" prop="scrapRemark" class="w50p">
          <el-input
            v-model="formData2.scrapRemark"
            type="textarea"
            placeholder="请输入备注(选填)"
            :autosize="{ minRows: 2, maxRows: 4 }"
            clearable
            :disabled="!editStatus"
          />
        </el-form-item>
      </el-form>
      <el-form
        v-if="activeName==='fourth'"
        label-position="left"
        :model="formData2"
        :rules="rules"
        class="el-form"
      >
        <el-form-item
          v-if="!editStatus"
          label="设备说明书："
          prop="equipmentCode"
          class="w100p"
        >
          <ul>
            <li v-for="item,index in docuemntList" :key="index">
              <span class="pointer" @click="downPDF(item)">{{item.fileName}}</span>
            </li>
          </ul>
        </el-form-item>
        <el-form-item v-else label="设备说明书：" prop="equipmentCode" class="w100p">
          <UploadDocument
            :disabled="true"
            ref="UploadPics"
            accept=".doc, .docx, .pdf, .xls, .xlsx"
            v-model="docuemntList"
            @input="handlerAddFileList($event, 'docuemnt')"
            @delectFileId="handlerDeleteId($event, 'docuemnt')"
          ></UploadDocument>
          <!-- <el-upload
            action
            :http-request="modeUpload"
            :file-list="docuemntList"
            accept=".pdf"
            :on-remove="handleRemoveD"
          >
            <el-button type="text" class="add-many">
              <i class="el-icon-plus"></i>
            </el-button>
          </el-upload>-->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="cancel()">取 消</el-button>
        <el-button
          type="primary"
          class="savebtn"
          @click="save()"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import equipStandingBookApi from "@/api/equip-manage/equip-standing-book";
import equipScrapRecordApi from "@/api/equip-manage/equip-scrap-record";
import equipPurchaseRecordApi from "@/api/equip-manage/equip-purchase-record";
import documentApi from "@/api/document";
import dataItemManageApi from "@/api/basic-info-manage/data-item-manage";
import { mapGetters } from "vuex";
import MapArea from "@/components/Amap/mapArea"
import UploadPics from "@/components/UploadPics/upload-img-list.vue";
import UploadDocument from "@/components/UploadPics/upload-document-list.vue";
import axios from "axios";
export default {
  name: "",
  components: { UploadPics, UploadDocument, MapArea },
  props: {
    nowChanceStau: {
      type: String,
      default: "",
    },
    show: {
      type: Boolean,
      default: false,
    },
    editObject: {
      type: [Object],
      default: () => {
        return {};
      },
    },
    equModelArr: {
      type: [Array],
      default: () => {
        return [];
      },
    },
  },
  data() {
    let checkInt = (rule, value, callback) => {
      if (value) {
        if (Number(value) && value % 1 === 0) {
          callback();
        } else {
          return callback(new Error("请输入整数！"));
        }
      }
    };
    return {
      lnglat:[ ],
      //图片文件
      modePicture: {},
      //视频文件
      modeVideo: {},
      //文档文件
      modeDocument: [],
      //上传视频文件后返回的视频id
      equipmentVideoIdList: [],
      fileList: [],
      //视频地址
      videoUrl: "",
      //存放视频的数组
      videoUrlList: [],
      //存放文档的数组
      docuemntList: [],
      // 选中的tab页
      activeName: "first",
      //是否处于编辑状态
      editStatus: true,
      //图片预览状态
      dialogVisible: false,
      // 存放图片列表的数组
      uploadPictureList: [],
      //图片预览url
      dialogImageUrl: "",
      pictureData: "",
      pictureList: [],
      formData: {},
      rules: {
        equModelCode: [
          {
            required: true,
            message: "请选择设备型号",
            trigger: ["change", "blur"],
          },
        ],
        equipmentName: [
          {
            required: true,
            message: "请输入设备名称",
            trigger: ["change", "blur"],
          },
        ],
        operationMode: [
          {
            required: true,
            message: "请选择是否展示工况数据",
            trigger: ["change", "blur"],
          },
        ],
        produceDate: [
          {
            required: true,
            message: "请选择生产日期",
            trigger: ["blur", "change"],
          },
        ],
        sellByDate: [
          {
            required: true,
            message: "请输入质保期",
            trigger: ["blur", "change"],
          },
        ],
        selfDriving: [
          {
            required: true,
            message: "请选择是否可自动驾驶",
            trigger: ["change", "blur"],
          },
        ],
      // },
      // rules1: {
        equipmentCode: [
          {
            required: true,
            message: "请选择设备名称",
            trigger: ["change", "blur"],
          },
        ],
        num: [
          {
            required: true,
            message: "请输入购置数量",
            trigger: ["change", "blur"],
          },
        ],
        total: [
          {
            required: true,
            message: "请输入购置总金额",
            trigger: ["change", "blur"],
          },
        ],
        // warrantyDate: [
        //   {
        //     required: true,
        //     message: "请选择设备质保日期",
        //     trigger: ["change", "blur"],
        //   },
        // ],
        purchaseDate: [
          {
            required: true,
            message: "请选择购置日期",
            trigger: ["change", "blur"],
          },
        ],
      // },
      // rules2: {
        equipmentCode: [
          {
            required: true,
            message: "请选择设备名称",
            trigger: ["change", "change"],
          },
        ],
        used: [{ validator: checkInt, trigger: ["change", "blur"] }],
        subsidy: [
          {
            required: true,
            pattern: /^-?\d{1,16}(?:\.\d{1,8})?$/,
            message: "请输入报废补贴金额(数字)",
            trigger: ["change", "blur"],
          },
        ],
        sellByDate: [
          {
            required: true,
            message: "请输入质保期",
            trigger: ["blur", "change"],
          },
        ],
        scrapDate: [
          {
            required: true,
            message: "请选择报废日期",
            trigger: ["change", "change"],
          },
        ],
      },
      yesOrNoList: [
        { name: "是", id: 0 },
        { name: "否", id: 1 },
      ],
      // 添加修改
      parameterList: [],
      formData1: {},

      // 单位
      unitArr: [],
      formData2: {},

      equipmentArr: [],
      showDialog: this.show,
      // 报废信息
      scrapObject: {},
      // 购置信息
      purchaseObject: {},
      scrapNowChanceStau: "add",
      purchaseNowChanceStau: "add",
      acept: "",
      acct: "",
      statusArr: [
        {
          name: "启用",
          id: "ENABLE",
        },
        {
          name: "废弃",
          id: "DISCARD",
        },
        {
          name: "维修中",
          id: "REPAIRING",
        },
        {
          name: "禁用",
          id: "DISABLE",
        },
      ],
    };
  },
  computed: {
    ...mapGetters({
      judgePermission: "permission/judgePermission",
    }),
  },
  watch: {
    show(v) {
      this.showDialog = v;
    },
    editObject(v) {
      if (v && v.equipmentCode) {
        this.formData1 = {
          equipmentCode: this.editObject.equipmentCode,
          equipmentName: this.editObject.equipmentName,
          ...this.editObject
        };
        this.formData2 = {
          equipmentCode: this.editObject.equipmentCode,
          equipmentName: this.editObject.equipmentName,
          ...this.editObject
        };
        this.formData = this.editObject;
        if (v.longitude && v.latitude) {
          this.lnglat = [v.longitude, v.latitude]
        }
        console.log("editObject", this.formData);
        (this.formData.operationMode =
          this.editObject.operationMode === false ? 1 : 0),
          (this.formData.selfDriving =
            this.editObject.selfDriving === false ? 1 : 0),
          console.log("editObject2", this.formData);
        this.scrapNowChanceStau = "edit";
        this.purchaseNowChanceStau = "edit";
        this.scrapObject = {};
        this.purchaseObject = {};
        // this.queryScrap(v.equipmentCode);
        // this.queryPurchase(v.equipmentCode);
        this.queryDocument(v.equipmentCode);
      }
    },
    "formData1.purchaseDate": {
      deep: true,
      handler(v) {
        if (v && this.formData1.sellByDate) {
          var dt = new Date(v);
          dt.setMonth(dt.getMonth() + this.formData1.sellByDate);
          //  document.write( dt );
          this.$set(this.formData1, "warrantyDate", this.dateToFormatTwo(dt));
        } else {
          this.$set(this.formData1, "warrantyDate", "");
        }
      },
    },
    "formData1.sellByDate": {
      deep: true,
      handler(v) {
        if (v && this.formData1.purchaseDate) {
          var dt = new Date(this.formData1.purchaseDate);
          dt.setMonth(dt.getMonth() + v);
          //  document.write( dt );
          this.$set(this.formData1, "warrantyDate", this.dateToFormatTwo(dt));
        } else {
          this.$set(this.formData1, "warrantyDate", "");
        }
      },
    },
    "formData2.scrapDate": {
      deep: true,
      handler(v) {
        if (this.activeName === 'third') {
          if (v && this.formData2.purchaseDate) {
            this.$set(this.formData2, "used", this.getDaysBetween(this.formData2.purchaseDate, v));
          } else {
            this.$message.warning('请先选择购置日期')
          }
        }
      },
    },
  },
  created() {},
  mounted() {
    this.queryUnitList();
    this.queryEquipment();
  },
  methods: {
        /**
       * @description 两个时间相减获取天数
       * @param {string} path
       * @returns {Boolean}
       */
       getDaysBetween(startDate, enDate) {
        const sDate = Date.parse(startDate);
        const eDate = Date.parse(enDate);
        if (sDate > eDate) {
          return 0;
        }
        if (sDate === eDate) {
          return 1;
        }
        const days = (eDate - sDate) / (1 * 24 * 60 * 60 * 1000);
        return days;
      },
    handleClick(tab, event) {
      console.log(tab, event);
      // this.clearValidate();
      this.$nextTick(() =>  {
        this.$refs.ruleForm?.clearValidate();
        this.$refs.ruleForm1?.clearValidate();
        this.$refs.ruleForm2?.clearValidate();
      })
    },
    // //保存上传文件
    // modeUpload(item) {
    //   if (item.file.type === "video/mp4") {
    //     this.modeVideo = item.file;
    //     //调用上传视频的方法
    //     this.handleSuccessV();
    //   } else if (
    //     item.file.type === "image/jpg" ||
    //     item.file.type === "image/png" ||
    //     item.file.type === "image/jpeg"
    //   ) {
    //     this.modePicture = item.file;
    //     this.uploadPictureList.push(item.file);
    //     //调用上传图片的方法
    //     this.handleSuccess();
    //   } else {
    //     this.modeDocument = item.file;
    //     this.docuemntList.push(item.file);
    //     //调用上传文档的方法
    //     this.handleSuccessD();
    //   }
    // },
    // // // 图片上传
    // // handleSuccess() {
    // //   let that = this;
    // //   let fd = new FormData();
    // //   fd.append("file", this.modePicture);
    // //   fd.append("equipmentCode", this.editObject.equipmentCode);
    // //   documentApi.addPictureList(fd).then((res) => {
    // //     if (res.code === 1) that.$message.success("上传成功！");
    // //     else that.$message.error(res.msg);
    // //   });
    // // },

    // // 图片文件上传
    // imgRequest(files) {
    //   this.uploadRequest(files, "image")
    // },
    // // 视频
    // videoRequest(files) {
    //   this.uploadRequest(files, "video")
    // },
    // // 上传文件
    // uploadRequest(files, type) {
    //   let { file } = files
    //   let dataForm = new FormData()
    //   dataForm.append('file', file)
    //   dataForm.append('moduleType', 'SCIENCE_ARTICLE')
    //   this.uploading = true
    //   DocumentApi.getUploadUrl(dataForm).then(res => {
    //     this.uploading = false
    //     let filePath = res.data;
    //   }).catch(() => {
    //     this.$message.error('上传失败！')
    //     this.uploading = false
    //   })
    // },
    // // 文档上传
    // handleSuccessD() {
    //   let that = this;
    //   let fd = new FormData();
    //   console.log(this.modeDocument);
    //   fd.append("file", this.modeDocument);
    //   fd.append("fileName", this.modeDocument.name);
    //   fd.append("equipmentCode", this.editObject.equipmentCode);
    //   documentApi.addDocument(fd).then((res) => {
    //     if (res.code === 1) that.$message.success("上传成功！");
    //     else that.$message.error(res.msg);
    //   });
    // },
    // // 视频上传
    // handleSuccessV() {
    //   let that = this;
    //   let fd = new FormData();
    //   fd.append("file", this.modeVideo);
    //   fd.append("videoName", this.modeVideo.name);
    //   documentApi.addEquipmentVideo(fd).then((res) => {
    //     if (res.code === 1) {
    //       that.equipmentVideoIdList.push(res.data.equipmentVideoId);
    //       that.$message.success("上传成功！");
    //     } else that.$message.error(res.msg);
    //   });
    // },
    // // 图片删除
    // handleRemove(file) {
    //   let that = this;
    //   documentApi.delPictureList(file.equipmentPictureId).then((res) => {
    //     if (res.code === 1) that.$message.success("删除成功！");
    //     else that.$message.error(res.msg);
    //   });
    // },
    // // 视频删除
    // handleRemoveV(file) {
    //   let that = this;
    //   // console.log(file)
    //   documentApi.delVideoList(file.equipmentVideoId).then((res) => {
    //     if (res.code === 1) {
    //       that.videoUrl = "";
    //       that.$message.success("删除成功！");
    //     } else that.$message.error(res.msg);
    //   });
    // },
    // // 文档删除
    // handleRemoveD(file) {
    //   let that = this;
    //   console.log(file);
    //   documentApi.delDocument(file.equipmentFileId).then((res) => {
    //     if (res.code === 1) {
    //       that.$message.success("删除成功！");
    //     } else that.$message.error(res.msg);
    //   });
    // },
    async queryDocument(params) {
      // 查询当前设备图片
      this.uploadPictureList = [];
      documentApi.queryPictureList(params).then((res) => {
        if (res.code === 1) {
          let data = res.data;
          setTimeout(() => {

            this.uploadPictureList = data;
            // this.pictureList = [];
            if (this.uploadPictureList.length > 0) {
              this.uploadPictureList.forEach((a) => {
                // a.name = a.pictureName;
                this.$set(a, "url", a.filePath);
                // this.$set(a, 'url', a.filePath);
                // this.pictureList.push(
                //   "data:application/*;base64," + a.pictureData
                // );
              });
            }
          },10)
          // this.pictureData = this.pictureList[0];
        }
      });
      this.videoUrlList = [];
      //查询当前设备视频id
      const res = await documentApi.queryVideoIdList(params);
      if (res.code === 1) {
        console.log(res);
                  setTimeout(() => {
        this.videoUrlList = res.data;
        if (this.videoUrlList.length > 0) {
          this.videoUrlList.forEach((a) => {
            a.name = a.videoName;
            this.$set(a, "url", a.filePath);
          });
          // this.videoUrl = `https://gateway.matefarm.net/v3/equipment-base/v1/equipmentVideo/getFileById?equipmentVideoId=${this.videoUrlList[0].equipmentVideoId}&databaseName=${sessionStorage.databaseName}`;
        }
                  },10)
      }
      this.docuemntList = []
      //查询当前设备文档文件
      documentApi.queryDocument(params).then((res) => {
        if (res.code === 1) {
          console.log("---", res.data);
          let data = res.data;
                    setTimeout(() => {
          this.docuemntList = data;
          if (this.docuemntList.length > 0) {
            this.docuemntList.forEach((a) => {
              this.$set(a, "url", a.filePath);
              a.name = a.fileName;
            });
          }
                    },10)
        }
      });
    },
    //文档下载
    downPDF(file) {
      console.log(file);
      documentApi
        .downPDF({ equipmentFileId: file.equipmentFileId })
        .then((res = {}) => {
          if (window.navigator.msSaveBlob) {
            // IE
            //IE无法打开Blob URL链接，所以不能预览只能通过window.navigator.msSaveBlob下载
            //注：msSaveBlob的第二个参数要有.pdf后缀，不然IE下载后是没有后缀的文件
            const blob = new window.Blob([res.data], {
              type: "application/pdf;charset-UTF-8",
            });
            window.navigator.msSaveBlob(blob, `${filename}.pdf`);
          } else {
            const blob = new window.Blob([res], {
              type: "application/pdf;charset-UTF-8",
            });
            const href = URL.createObjectURL(blob);
            window.open(href);
          }
        });
    },
    queryScrap(params) {
      equipScrapRecordApi.query(params).then((res) => {
        if (res.code === 1) {
          let data = res.data || {};
          this.scrapObject = data;
          if (this.scrapObject.equipmentCode) {
            this.scrapNowChanceStau = "edit";
            this.formData2 = this.scrapObject;
          } else {
            this.scrapNowChanceStau = "add";
          }
        }
      });
    },
    queryPurchase(params) {
      equipPurchaseRecordApi.query(params).then((res) => {
        if (res.code === 1) {
          let data = res.data || {};
          this.purchaseObject = data;
          if (this.purchaseObject.equipmentCode) {
            this.purchaseNowChanceStau = "edit";
            this.formData1 = this.purchaseObject;
          } else {
            this.purchaseNowChanceStau = "add";
          }
        }
      });
    },
    // 单位
    queryUnitList() {
      this.unitArr = [];
      dataItemManageApi.queryUnit({}).then((res) => {
        if (res.code === 1) {
          let data = res.data || {};
          this.unitArr = data;
        } else {
          this.$message.error("单位名称给获取失败");
        }
      });
    },
    queryEquipment() {
      this.equipmentArr = [];
      equipScrapRecordApi.queryEquipment({}).then((res) => {
        if (res.code === 1) {
          let data = res.data || [];
          for (var i in data) {
            this.equipmentArr.push({
              equipmentName: data[i],
              equipmentCode: i,
            });
          }
        }
      });
    },
    save() {
      console.log("save");
      this.close()
    },
    // 添加-轮播图/视频
    handlerAddFileList(data, type) {
      // console.log(data);
     return false
    },
    // 文件上传
    handleSuccessD(obj) {
      let that = this;
      // let fd = new FormData();
      // fd.append("file", this.modePicture);
      // fd.append("equipmentCode", this.editObject.equipmentCode);
      documentApi
        .addDocumentNew({
          equipmentCode: this.editObject.equipmentCode,
          filePath: obj.url,
          fileName: obj.fileName,
        })
        .then((res) => {
          if (res.code === 1) {
            //  that.$message.success("上传成功！");
            this.queryDocument(this.editObject.equipmentCode);
          } else that.$message.error(res.msg);
        });
    },
    // 视频上传
    handleSuccessV(obj) {
      let that = this;
      // let fd = new FormData();
      // fd.append("file", this.modePicture);
      // fd.append("equipmentCode", this.editObject.equipmentCode);
      documentApi
        .addEquipmentVideoNew({
          equipmentCode: this.editObject.equipmentCode,
          filePath: obj.url,
          fileName: obj.fileName,
        })
        .then((res) => {
          if (res.code === 1) {
            equipStandingBookApi.bindEquipmentAndVideo({
              equipmentCode: this.editObject.equipmentCode,
              equipmentVideoIdList: [res.data.equipmentVideoId],
            });
            //  that.$message.success("上传成功！");
            this.queryDocument(this.editObject.equipmentCode);
          } else that.$message.error(res.msg);
        });
    },
    // 图片上传
    handleSuccess(obj) {
      let that = this;
      // let fd = new FormData();
      // fd.append("file", this.modePicture);
      // fd.append("equipmentCode", this.editObject.equipmentCode);
      documentApi
        .addPictureListNew({
          equipmentCode: this.editObject.equipmentCode,
          filePath: obj.url,
          fileName: obj.fileName,
        })
        .then((res) => {
          if (res.code === 1) {
            //  that.$message.success("上传成功！");
            this.queryDocument(this.editObject.equipmentCode);
          } else that.$message.error(res.msg);
        });
    },
    // 删除-轮播图/视频
    handlerDeleteId(file, type) {
      // this.$confirm()
      this.$confirm(
        `确认删除该${
          type === "png" ? "图片" : type === "video" ? "视频" : "文件"
        }`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          customClass: "myClass",
        }
      )
        .then(() => {
          // console.log(file)
          if (file.equipmentPictureId) {
            documentApi.delPictureList(file.equipmentPictureId).then((res) => {
              if (res.code === 1) this.$message.success("删除成功！");
              else this.$message.error(res.msg);
            });
            let fileId = file.url;
            this.uploadPictureList.splice(
              this.uploadPictureList.findIndex((i) => i.url == fileId),
              1
            );
          } else if (file.equipmentVideoId) {
            documentApi.delVideoList(file.equipmentVideoId).then((res) => {
              if (res.code === 1) this.$message.success("删除成功！");
              else this.$message.error(res.msg);
            });
            let fileId = file.url;
            this.videoUrlList.splice(
              this.videoUrlList.findIndex((i) => i.url == fileId),
              1
            );
          } else if (file.equipmentFileId) {
            documentApi.delDocument(file.equipmentFileId).then((res) => {
              if (res.code === 1) {
                this.$message.success("删除成功！");
              } else this.$message.error(res.msg);
            });
            let fileId = file.url;
            this.docuemntList.splice(
              this.docuemntList.findIndex((i) => i.url == fileId),
              1
            );
          } else {
            if (type === "video") {
              let fileId = file.url;
              this.videoUrlList.splice(
                this.videoUrlList.findIndex(i => i.url == fileId),
                1
              );
            } else if (type === "png") {
              let fileId = file.url;
              this.uploadPictureList.splice(
                this.uploadPictureList.findIndex(i => i.url == fileId),
                1
              );
            } else  {

            let fileId = file.url;
            this.docuemntList.splice(
              this.docuemntList.findIndex(i => i.url == fileId),
              1
            );
            }
            }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    close() {
      this.clearValidate();
      this.$emit("closeDialog");
    },
    cancel() {
      this.clearValidate();
      this.$emit("cancelDialog");
      this.editStatus = true;
    },
    clearValidate() {
      this.activeName = "first";
      this.$refs.ruleForm?.clearValidate();
      this.$refs.ruleForm1?.clearValidate();
      this.$refs.ruleForm2?.clearValidate();
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-dialog__body {
    min-height: 66vh;
    max-height: 66vh;
    padding: 30px 20px 15px;
    // overflow-y:  auto;
  }
  .el-form {
    height: 56vh;
    overflow-y: auto;
    align-content: flex-start;
  }
  .el-dialog__wrapper .el-dialog .el-dialog__body .is-disabled {
    .el-input__inner {
      background-color: #dedede;
      // color: #000;
    }
    .el-textarea__inner {
      background-color: #dedede;

    }
  }
}
.add-many {
  border: 1px solid #6ecae3;
  width: 40px;
  height: 40px;
  padding: 0;
  background-color: transparent;
  line-height: 40px;
  border-radius: 4px;
  color: rgb(161, 154, 154);
  font-weight: 600;
  i {
    font-size: 40px;
  }
}
.pointer {
  cursor: pointer;
}
::v-deep .el-upload-dragger {
  width: 330px;
}
.video-con {
  width: 100%;
  height: 200px;
}
::v-deep
  .el-dialog__wrapper
  .el-dialog
  .el-dialog__body
  .el-form
  .el-form-item
  .el-form-item__label {
  min-width: 160px !important;
}
::v-deep .el-tabs__item.is-active {
  color: #006e91;
}
::v-deep .el-image-viewer__close {
  color: #006e91;
}
::v-deep .el-tabs__item {
  font-size: 16px;
  &:hover {
    color: #006e91;
  }
}
::v-deep .el-tabs__active-bar {
  background-color: #006e91;
}
</style>
